<template>
  <div>
    <!-- 卡片 -->
    <div style="margin: 15px; display: flex">
      <span>供应商名称：</span>
      <el-input v-model="supplierName" size="mini" style="width: 200px; margin-right: 15px" placeholder="请输入内容">
      </el-input>
      <el-button type="primary" size="mini" @click="gettravelSupplierVoList()">查询</el-button>
      <el-button type="primary" size="mini" @click="newDialog()">新增</el-button>
      <el-button type="primary" size="mini" @click="reset()">重置</el-button>
    </div>
    <!-- 列表 -->

    <!-- 用户列表区 -->
    <el-table size="mini" style="width: 95%; margin: 15px" :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }" id="tableTop" :data="travelSupplierVoList" border stripe>
      <el-table-column label="供应商主键" prop="supplierId"></el-table-column>
      <el-table-column label="供应商类型" prop="supplierType">
        <template slot-scope="scope">
          <template v-if="scope.row.supplierType == 'group'">团供应商</template>
          <template v-if="scope.row.supplierType == 'insurance'">保险供应商</template>
        </template>
      </el-table-column>
      <el-table-column label="供应商名称" prop="supplierName"></el-table-column>
      <el-table-column label="录入人" prop="employeeName"></el-table-column>
      <el-table-column label="录入时间" prop="createTime"></el-table-column>

      <el-table-column label="操作" prop="createTime">
        <template slot-scope="scope">
          <el-button style="background-color: #6090ec; color: #fff" size="mini" @click="editDialog(scope.row)">修改
          </el-button>
          <el-button @click="deleteSupplier(scope.row)" style="background-color: #ff0000; color: #fff" size="mini">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--新增弹窗 -->
    <el-dialog :title="titleMap[dialogStatus]" :visible.sync="addcenterDialogVisible" width="30%" center
      :close-on-click-modal="false">
      <el-form :model="adddata" :rules="rules" ref="adddata" class="demo-ruleForm">
        <el-form-item label="供应商名称 :" prop="supplierName">
          <el-input size="mini" style="width: 200px" v-model="adddata.supplierName"></el-input>
        </el-form-item>
        <el-form-item label="供应商类型 :" prop="supplierType">
          <el-select v-model="adddata.supplierType" placeholder="请选择供应商类型" size="mini" @change="selectSupplier($event)">
            <el-option v-for="item in supplierArr" :key="item.value" :label="item.label" :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="submitForm('adddata')">保 存</el-button>
      </span>
    </el-dialog>
    <el-pagination style="margin-top: 15px" align="center" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 15, 20]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        titleMap: {
          addEquipment: "新增",
          editEquipment: "修改",
        },
        selectRow: {},
        dialogStatus: "", //新增或者编辑框标题
        //分页
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,

        format: "yyyy-MM-dd",
        // 新增弹窗
        addcenterDialogVisible: false,
        // 查询名称
        supplierName: "",
        supplierType: "",
        // 查询回来的数据
        travelSupplierVoList: [],
        // 新增数据
        adddata: {
          supplierName: "", //名称
          supplierType: "", //类型
        },
        // 供应商数组
        supplierArr: [{
            value: "group",
            label: "团供应商",
          },
          {
            value: "insurance",
            label: "保险供应商",
          },
        ],
        // 新增表单验证
        rules: {
          supplierName: [{
            required: true,
            message: "请输入供应商名称",
            trigger: "blur"
          }, ],
          supplierType: [{
            required: true,
            message: "请选择供应商类型",
            trigger: "change"
          }, ],
        },
      };
    },
    watch: {},

    methods: {

      // 表格修改
      editSupplier(row) {
        // console.log(row.supplierId)
        this.$axios
          .updTravelSupplier({
            supplierId: row.supplierId,
            supplierType: this.supplierType,
            supplierName: this.adddata.supplierName,
          })
          .then((res) => {
            
            if (res.code == "200") {
              this.addcenterDialogVisible = false;
              console.log(res, 'res')
              this.gettravelSupplierVoList()
              this.$message({
                message: "修改成功",
                type: "success",
              });
            }
          });
      },
      // 表格删除
      deleteSupplier(row) {},
      // 重置按钮
      reset() {
        this.supplierName = "";
        var reset = "reset"; //重置
        this.gettravelSupplierVoList(reset);
      },
      selectSupplier(event) {
        this.supplierArr.forEach((element) => {
          if (element.label == event) {
            this.supplierType = element.value;
          }
        });
      },
      // 供应商列表
      gettravelSupplierVoList(reset) {
        console.log(reset, "reset");
        this.$axios
          .gettravelSupplierVoList({
            supplierName: this.supplierName,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.travelSupplierVoList = res.data;
              console.log(this.travelSupplierVoList, "this.travelSupplierVoList");
              this.pageTotal = res.total;
              // if (res.total == 0) {
              //   this.$message({
              //     message: "暂无数据",
              //     type: "warning",
              //   });
              // } else if (reset) {
              //   this.$message({
              //     message: "重置成功",
              //     type: "success",
              //   });
              // } else {
              //   this.$message({
              //     message: "查询成功",
              //     type: "success",
              //   });
              // }
            }
          });
      },
      // 新增供应商
      newDialog() {
        this.dialogStatus = "addEquipment";
        let form = this.adddata
        Object.keys(form).forEach(key => (form[key] = ''));
        this.selectRow.supplierId = null
        this.addcenterDialogVisible = true;
      },

      editDialog(row) {
        this.selectRow = row;
        console.log(this.selectRow)
        this.supplierType = row.supplierType;
        this.adddata.supplierName = row.supplierName;
        this.adddata.supplierType = row.tmpSupplierType;
        this.addcenterDialogVisible = true;
        this.dialogStatus = "editEquipment";
      },
      addTravelSupplier() {
        // this.adddata = {} //表单清空
        this.addcenterDialogVisible = true;
        localStorage.setItem("isToken", true);
        this.$axios
          .addTravelSupplier({
            supplierType: this.supplierType,
            supplierName: this.adddata.supplierName,
          })
          .then((res) => {
            
            console.log(res);
            if (res.code == "200") {
              this.addcenterDialogVisible = false;
              this.gettravelSupplierVoList()
              this.$message({
                message: "新增供应商成功!",
                type: "success",
              });
            }
          });
      },

      // 保存按钮
      submitForm(adddata) {
        console.log(this.selectRow.supplierId)
        // debugger
        this.$refs[adddata].validate((valid) => {
          if (valid) {
            if (this.selectRow.supplierId == null) {
              this.addTravelSupplier();
            } else {
              this.editSupplier(this.selectRow);
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      // 取消按钮
      cancel() {
        this.addcenterDialogVisible = false;
      },
      //分页
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.gettravelSupplierVoList();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);

        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.gettravelSupplierVoList();
        // orders = res.data;
      },

      search() {
        localStorage.setItem("pageNum", this.currentPage);
        localStorage.setItem("pageSize", 10);
        this.gettravelSupplierVoList();
      },
    },

    mounted() {
          localStorage.setItem("pageNum",1);
        localStorage.setItem("pageSize", 10);
      this.gettravelSupplierVoList();
    },
  };
</script>
<style scoped>
  el-table-column {
    background-color: #f2f2f2;
  }

  #searchBtn {
    background-color: #54dac9;
    color: #fff;
  }
</style>